<template>
    <div class="container">
        <!-- <div class="contact">
            联系电话：18036136237
        </div> -->
        <div class="left">
            <img src="@/assets/logo.png" class="left-logo"/>
            <img src="@/assets/login/bg.png" alt="" class="left-bg"/>
        </div>
        <div class="right">
            <div class="login" v-show="!isQr && !showcompany">
                <h1>登录</h1>
                <div class="login-pass">
                    <el-input placeholder="请输入用户名" class="login-input" type="text" v-model="userName"/>
                    <el-input placeholder="请输入密码" class="login-input" type="password" v-model="password"
                              @keydown.enter="login"/>
                    <el-input placeholder="请输入验证码" class="login-input" type="number" v-model="verityCode"
                              @keydown.enter="login">
                        <template v-slot:suffix>
                            <img @click="getCode()" class="verity-img point" :src="verityImg"  alt=""/>
                        </template>
                    </el-input>
                    <el-button class="btn" type="primary" @click="login" round>下一步</el-button>
                    <!-- <el-button class="btn" type="primary" @click="onNextStep" round>下一步</el-button> -->
                    <div class="memory point">
                        <el-checkbox v-model="isStorage"/>
                        <span>记住密码</span>
                    </div>
                    <div class="other-login-title">
                        第三方登录
                    </div>
                    <div class="other-login-type">
                        <img class="other-icon point" src="@/assets/login/wechat.png" @click="qrLogin()"/>
                    </div>
                </div>
            </div>
            <div class="wx-login login" v-if="isQr && !showcompany">
                <!--                'https%3A%2F%2Fweb.51zidan.com%2F%23%2Flogin%3FisNext%3Dtrue'-->
                <span class="close point" @click="cancelQr()">×</span>
                <iframe sandbox="allow-top-navigation allow-scripts allow-same-origin"
                        src="https://open.weixin.qq.com/connect/qrconnect?appid=wx84466f4f797cb991&scope=snsapi_login&redirect_uri=https%3A%2F%2Fweb.51zidan.com%2F%23%2Flogin%3FisNext%3Dtrue&state=saas"/>
                <!--                <iframe sandbox="allow-top-navigation allow-scripts allow-same-origin"-->
                <!--                        src="https://open.weixin.qq.com/connect/qrconnect?appid=wx84466f4f797cb991&scope=snsapi_login&redirect_uri=https%3A%2F%2Fweb.51zidan.com%2F%23%2Flogin&state=saas"/>-->
            </div>
            <div class="chooseCompany" v-if="showcompany">
                <div class="backbox" @click="back">
                    <img class="tolefticon" src="../assets/common/tolefticon.png" alt="">
                    返回
                </div>
                <div class="chooseCompany-title">选择你管理的企业</div>
                <div class="company-list-box">
                    <div class="itembox" v-for="(item, i ) in companyList" :key="i" @click="sureLogin(item.companyId, item.phone)">
<!--                        <div class="tag" v-if="item.isSelected === 1">上次登陆</div>-->
                        <div class="flex gap-10 flex-ai-c">
                            <img src="../assets/common/companyicon.png" class="w-h-32" alt="">
                            <div>
                                <div class="text-14">{{ item.companyName }}</div>
                                <div class="flex flex-ai-c gap-10">
                                    <div class="tagstatus1" v-if="item.auditStatus"><img
                                        src="../assets/common/success.png" class=" w-h-12" alt="">已认证
                                    </div>
                                    <div class="tagstatus2" v-if="!item.auditStatus"><img src="../assets/common/err.png"
                                                                                          class=" w-h-12" alt="">未认证
                                    </div>
                                    <div class="companysupname">主管理员：{{ item.superAdminName }}</div>
                                </div>
                            </div>
                        </div>
                        <img src="../assets/common/torighticon.png" class="w-h-16" alt="">
                    </div>
                </div>

                <!--                <iframe-->
                <!--                    sandbox="allow-top-navigation allow-scripts allow-same-origin"-->
                <!--                    src="https://open.weixin.qq.com/connect/qrconnect?appid=wx84466f4f797cb991&scope=snsapi_login&redirect_uri=https%3A%2F%2Fweb.51zidan.com%2F%23%2Flogin&state=saas"-->
                <!--                />-->
                <!--                <iframe-->
                <!--                    sandbox="allow-top-navigation allow-scripts allow-same-origin"-->
                <!--                    src="https://open.weixin.qq.com/connect/qrconnect?appid=wx84466f4f797cb991&scope=snsapi_login&redirect_uri=https%3A%2F%2Fweb.51zidan.com%2F%23%2Flogin%3FisNext%3Dtrue&state=saas"-->
                <!--                />-->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import user from '../utils/user'
import { CompanyItemDto, getCompanyListApi, replaceCompany } from '@/api/alipay-recharge'
import global from '@/utils/global'

export default defineComponent({
    name: 'Login',
    data() {
        return {
            companyList: [] as CompanyItemDto[],
            showcompany: false,
            userName: '',
            password: '',
            verityCode: '',
            isStorage: false,
            verityImg: '',
            uuid: '',
            isQr: false
        }
    },

    watch: {
        async $route(to, from) {
            console.log(to.query, 'jdsgujisiuj')
            if (to.query.isNext && to.query.code) {
                this.showcompany = true
                let commonlyList = await user.codeLogin(to.query.code)
                this.companyList = commonlyList as CompanyItemDto[]
            }
        }
    },
    async created() {
        // start 2024.10.17 微信登录授权跳转的redirect_uri路径变掉了，类似于https://yy.51zidan.com/?code=091x4Zll2J7Gne4cO7ol2nsYnK2x4Zlu&state=saas#/login，导致路由里变化里监听不到变化无法调用接口，所以加了这个判断操作
        const href = window.location.href
        if (href.endsWith('state=saas#/login') && href.includes('code=')) {
            const querystr = href.split('?')[1]
            const codestr = querystr.split('&')[0]
            const code = codestr.split('=')[1]
            if (code) {
                this.showcompany = true
                let commonlyList = await user.codeLogin(code)
                this.companyList = commonlyList as CompanyItemDto[]
                // window.open('https://web.51zidan.com/', '_self')
                // this.handleRedirectTo()
            }
        }
        // end
        if (localStorage.userName) {
            this.userName = localStorage.userName
            this.password = localStorage.password
            this.isStorage = true
        }
        this.getCode()
    },
    methods: {
        async sureLogin(id: string | number, phone: string | number) {
            await user.switchLogin({
                username: this.isQr ? phone : this.userName,
                companyId: id
            })
            await this.handleRedirectTo()
        },
        async back() {
            this.showcompany = false
        },
        async getCode() {
            const photo = await user.getPhoto()
            this.verityImg = 'data:image/jpg;base64,' + photo.img
            this.uuid = photo.uuid
        },
        async onNextStep() {
            this.showcompany = true
            let commonlyList = await getCompanyListApi({ phone: this.userName })
            console.log(commonlyList, 'commonlyList')
            this.companyList = commonlyList as CompanyItemDto[]
        },
        async login() {
            await user
                .login({
                    username: this.userName,
                    password: this.password,
                    uuid: this.uuid,
                    code: this.verityCode
                })
                .catch(() => {
                    this.getCode()
                    this.verityCode = ''
                    throw new Error()
                })
            await this.onNextStep()
            // if (this.isStorage) {
            //     localStorage.userName = this.userName
            //     localStorage.password = this.password
            // } else if (localStorage.userName) {
            //     localStorage.removeItem('userName')
            //     localStorage.removeItem('password')
            // }
            // sessionStorage.setItem('tcflag', 'true')
            // sessionStorage.setItem('dayinsuretcflag', 'true')
            // this.handleRedirectTo()
        },
        qrLogin() {
            this.isQr = true
        },
        cancelQr() {
            this.isQr = false
        },
        handleRedirectTo() {
            if (user.isPcAdmin) {
                this.$router.push({
                    path: '/'
                })
            } else {
                this.$router.push({
                    path: '/pay'
                })
            }
        }
    }
})
</script>
<style lang="stylus" scoped>
.tagstatus1
    width 60px
    height 18px
    border-radius 8px
    background-color rgba(25, 137, 250, .2)
    font-size 10px
    color rgba(25, 137, 250, 1)
    boxs-sizing border-box
    display flex
    align-items center
    justify-content center

.tagstatus2
    width 60px
    height 18px
    border-radius 8px
    background-color rgba(86, 88, 104, .2)
    font-size 10px
    color #565868
    boxs-sizing border-box
    display flex
    align-items center
    justify-content center

.companysupname
    color #565868
    font-size 12px

.text-14
    font-size 14px
    font-weight 700

.w-h-12
    width 12px
    height 12px

.w-h-16
    width 16px
    height 16px

.w-h-32
    width 32px
    height 32px

.backbox
    cursor pointer
    position absolute
    color #9497B1
    font-size 14px
    display flex
    align-items center
    top 20px
    left 20px

.tolefticon
    width 12px
    height 12px

.itembox
    width 100%
    box-sizing border-box
    height 68px
    background-color rgba(238, 238, 238, 0.5)
    border-radius 8px
    padding 16px 16px 16px 12px
    position relative
    display flex
    align-items center
    justify-content space-between

.tag
    position absolute
    width 48px
    height 20px
    border-top-right-radius 8px
    border-bottom-left-radius 8px
    background-color rgba(25, 137, 250, .2)
    font-size 10px
    color rgba(25, 137, 250, 1)
    boxs-sizing border-box
    top 0
    right 0
    display flex
    align-items center
    justify-content center

.company-list-box
    width 100%
    box-sizing border-box
    display flex
    flex-direction column
    gap 12px
    height 205px
    overflow-y scroll
    scrollbar-width none /* Firefox */
    -ms-overflow-style none

/* IE 10+ */
.company-list-box::-webkit-scrollbar
    display none

/* Chrome Safari */
.chooseCompany-title
    color #202536
    font-size 26px
    font-weight 700
    margin-bottom 44px

.chooseCompany
    position relative
    width 480px
    height 512px
    box-sizing border-box
    background #FFFFFF
    border 0.5px solid #E5E8EF
    box-shadow 0px 4px 20px 0px rgba(0, 0, 0, 0.16)
    padding 140px 80px 86px
    border-radius 8px

.contact
    position absolute
    bottom 30px
    left 40px

@media screen and (max-width 1200px)
    .container .left
        display none

    .container .right
        width 100%

.container
    background: white;
    display flex

.left
    width: 472px
    height 100vh
    background-color #F7F8FC
    display inline-block

// min-width-hide(1200px)
.left-logo
    width 120px
    margin 38px 33px

.left-bg
    width 419px
    margin 90px auto 0
    display block

.right
    display inline-block
    width calc(100vw - 472px)
    height 100vh
    display flex
    justify-content center
    align-items center

.login
    width 296px
    margin-top -20px
    text-align center

.login-input
    width 295px
    height 44px
    box-sizing border-box
    margin-top 28px

.btn
    width 294px
    height 56px
    border-radius 56px
    font-size 16px
    margin-top 32px

.other-icon
    width 36px
    height 36px

.memory
    font-size 14px
    color #1989fa
    margin-top 12px
    display flex
    align-items center
    justify-content center

    span
        margin-left 6px

.verity-img
    height 34px
    position relative
    top 3px
    border-radius 3px

.other-login-title
    font-size 14px
    color color-grey
    margin-top 32px
    space-between()

    &:before, &:after
        content ''
        display inline-block
        width 98px
        height 1px
        background-color border-color

.other-login-type
    margin-top 20px

.wx-login
    position relative

iframe
    overflow auto
    height 400px
    border none

.close
    position absolute
    right -50px
    top -40px
    font-size 36px
    color color-grey
</style>
